<template>
  <div class="charge-system">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">收入日帐-片区码号收入</div>
      </div>
    </div>
    <div class="operation">
      <el-form :inline="true" :model="form" label-width="80px" class="formList">
        <el-form-item label="选择区域">
          <dx-cascader :area_id.sync="form.areaId" :area_name.sync="areaName" />
        </el-form-item>
        <el-form-item label="账期">
          <el-date-picker v-model="form.month" value-format="yyyyMM" type="month" placeholder="选择月"></el-date-picker>
        </el-form-item>
        <el-form-item label="是否税后" style="width: 48%">
          <el-switch v-model="form.isAfterTax"> </el-switch>
          <el-checkbox size="mini" v-model="form.isHb">是否环比</el-checkbox>
          <el-button size="small" type="primary" style="margin-left: 12px" @click="queryHandle()">查询</el-button>
          <el-button size="small" type="orange" @click="handle_export()">导出</el-button>
        </el-form-item>
      </el-form>
      <div class="table--top">
        <div class="notice-bar">
          <NoticeBar :text="noticeText"></NoticeBar>
        </div>
        <p class="g-unit">单位: 万元</p>
      </div>
      <div class="tableBox">
        <el-table border stripe v-loading="tableLoading" :data="tableData" style="width: 100%" class="tableTh28"
                  height="73vh" ref="table">
          <el-table-column fixed prop="dataSourceName" label="收入来源" width="80px"
                           show-overflow-tooltip></el-table-column>
          <el-table-column fixed prop="class1" label="收入项" width="80px"></el-table-column>
          <el-table-column fixed prop="class2" label="收入面" width="100px"></el-table-column>
          <el-table-column fixed prop="indexname" label="产品项" min-width="140" show-overflow-tooltip>
          </el-table-column>
          <!-- <el-table-column fixed prop="total" label="月账" width="100px"></el-table-column> -->
          <el-table-column v-for="(it, i) in titles" :key="i" :prop="it.value" :label="it.label + '号 (' + it.week + ')'"
                           min-width="100">
          </el-table-column>
          <el-table-column prop="real_33" label="33号(上月分摊)" min-width="120">
          </el-table-column>
        </el-table>
        <div class="page-wrapper" v-if="tableData.length">
          <span class="totalNum">共{{ totalNum }}条</span>
          <el-pagination layout="prev, pager, sizes, next" :page-sizes="[10, 20, 50]" @size-change="sizeChange"
                         :page-size="pageSize" :total="totalNum" :current-page.sync="currentPage"
                         @current-change="handleCurrentChange"></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { $budgetAPI } from "@/api";
import { getSessionStorage } from "@/common/js/storage";
import { getCookie } from "@/common/js/cookie";
import { createSpanCharge, mergeSpan } from "@/utils/mixin";
import { getMonthDays, getWeek } from "@/utils/common";
import prefixAPI from "@/api/prefixAPI";
import { months } from "moment";
import { downLoadExcelParams } from "@/utils/zipdownload.js";
export default {
    name: "Bill-tab1",
    components: {
        NoticeBar: () => import("@/components/NoticeBar")
    },
    data() {
        let nowYear = new Date().getFullYear();
        let nowMonth = new Date().getMonth() + 1;
        let month = nowMonth > 9 ? nowYear + "" + nowMonth : nowYear + "0" + nowMonth;
        return {
            areaName: "",
            titleName: [],
            tableLoading: false,
            form: {
                areaId: JSON.parse(getSessionStorage("accountInfo")).areaId,
                month: month,
                isAfterTax: true,
                isHb: false
            },
            tableData: [],
            colList: [],
            titles: [],
            colnumName: [],
            // page: 1,
            pageSize: 50,
            currentPage: 1,
            // dataTotal: 0,
            totalNum: 0,
            dataSourceNameList: [],
            verticalIndexNameList: [],
            CcustFlgTypeOptions: [],

            noticeText: ""
        };
    },
    created() {
        // this.submitHandle();
        // this.getCcustFlgType();
        this.getRzMonErrLog();

        this.init();
    },
    methods: {
        getCcustFlgType() {
            $budgetAPI.getCcustFlgType({}, (res) => {
                this.CcustFlgTypeOptions = res.content;
            });
        },
        getRzMonErrLog() {
            $budgetAPI.getRzMonErrLog({ acctMonth: this.form.month }, (res) => {
                this.noticeText = res.content.toString();
            });
        },
        getDataSourceName() {
            var that = this;
            $budgetAPI.getDataSourceName({}, (res) => {
                if (res && res.code == 0) {
                    that.dataSourceNameList = res.content;
                }
            });
        },
        getVerticalIndexName() {
            var that = this;
            $budgetAPI.getVerticalIndexName({}, (res) => {
                if (res && res.code == 0) {
                    that.verticalIndexNameList = res.content;
                }
            });
        },
        init() {
            this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
            this.form.areaId = this.accountInfo.areaId;
            // this.getDataSourceName();
            // this.getVerticalIndexName();
            this.submitHandle();
            // 删除或取服务器事件，改为前端或取
            // this.getMaxAcctMonthByDailyAccount();
        },
        //页码改变
        sizeChange(val) {
            this.pageSize = val;
            this.submitHandle();
        },
        //翻页操作
        handleCurrentChange(page) {
            this.currentPage = page;
            this.submitHandle();
        },
        //请求数据
        // /api/dailyOutAccountTwo/getMHList?acctMonth=202306&areaId=2&isHb=true&isAfterTax=true&pageSize=10&pageNum=1
        submitHandle() {
            var that = this,
                areaId = this.form.areaId,
                acctMonth = this.form.month,
                isAfterTax = this.form.isAfterTax,
                isHb = this.form.isHb,
                year = that.form.month.substr(0, 4),
                month = that.form.month.substr(4, 2),
                count = getMonthDays(year, month),
                custFlg = this.form.custFlg || null;

            let params = {
                areaId,
                acctMonth,
                isAfterTax,
                isHb,
                pageNum: this.currentPage,
                pageSize: this.pageSize
            };
            if (custFlg) params.custFlg = custFlg;
            that.tableLoading = !0;
            that.tableData = [];
            that.titles = Array.from(new Array(count), (it, i) => {
                var index = i + 1 < 10 ? "0" + (i + 1) : i + 1;
                return {
                    value: isHb ? "hb_" + index : "real_" + index,
                    label: i + 1 + "",
                    week: getWeek(year + "-" + month + "-" + index)
                };
            });

            $budgetAPI.dailyGetList2023(
                params,
                (res) => {
                    this.tableLoading = false;
                    if (res.code == 0) {
                        that.tableData = res.content.items;
                        that.totalNum = res.content.totalNum;
                        // that.$nextTick(() => {
                        //     that.$refs.table.doLayout();
                        // });
                    }
                },
                (err) => {
                    this.tableLoading = false;
                }
            );
        },
        //查询
        queryHandle() {
            this.currentPage = 1;
            this.submitHandle();
            this.getRzMonErrLog();
        },
        // 生成tableData数据
        createTableData(dataArr) {
            let result = dataArr.map((item, index) => {
                return { ...item, ...item.data };
            });
            return result;
        },
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex == 0 || columnIndex == 1 || columnIndex == 2 || columnIndex == 3) {
                return this.spanArr[rowIndex][columnIndex];
            }
        },
        handle_export() {
            const { areaName } = this;
            let areaId = this.form.areaId,
                acctMonth = this.form.month,
                isAfterTax = this.form.isAfterTax,
                isHb = this.form.isHb,
                token = getCookie("token"),
                custFlg = this.form.custFlg;
            let params = {
                areaId,
                acctMonth,
                isAfterTax,
                isHb
                // token
            };
            let fileName = `收入日帐-片区码号${isHb?'环比':''} -${areaName} -${acctMonth} `;
            if (custFlg) params.custFlg = custFlg;
            downLoadExcelParams("/dailyOutAccountTwo/exportBatchByMH", params, fileName);
        }
    }
};
</script>

<style lang="scss" scoped>
.page-wrapper {
    display: flex;
    align-items: center;
    text-align: right;
    justify-content: flex-end;
    padding: 15px 0;
    .totalNum {
        color: #999;
    }
}
.charge-system {
    .daochu {
        .el-form-item__content {
            float: right;
            width: 100%;
        }
    }
}
.table--top {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 20px 0;
    .notice-bar {
        width: 550px;
    }
    .g-unit {
        text-align: right;
        flex: 1;
        transform: translateY(10px);
    }
}
</style>
